<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" media="screen">
        #list{list-style:none;width:500px;border:1px solid #ccc;padding:0;}
        li{padding:5px;}
        li:hover{background-color:#ddd;}
        li>a{padding:0 20px;}
        li i{font-style:normal;display:inline-block;width:100px;}
        li span{display:inline-block;width:300px;}
    </style>
</head>
<body>
<ul id="list">

</ul>
<input type="button" id='add-btn' value="初始化">
<input type="button" id="del-btn" value="删除选中">
<input type="button" value='价格大到小' id="max-btn">
<input type="button" value='价格小到大' id="min-btn">
<script>
    var ul = document.getElementById('list');
    var data = [
        {name:'A',price:60},
        {name:'B',price:50},
        {name:'C',price:40},
        {name:'D',price:30}
    ];
    add(data);
    document.getElementById('add-btn').onclick = function(){
        add(data);
    }
    document.getElementById('del-btn').onclick = function(){
        remove();
    }
    document.getElementById('max-btn').onclick = function(){
        order(1);
    }
    document.getElementById('min-btn').onclick = function(){
        order(-1);
    }
    ul.onclick = move;
    function add(list){
        ul.innerHTML = '';
        var fragment = document.createDocumentFragment();
        list.forEach(function(item){
            var li = document.createElement('li');
            var input = document.createElement('input');
            input.type = "checkbox";
            li.appendChild(input);
            var span = document.createElement('span');
            span.innerHTML = '<i>'+item.name+'</i>'+item.price;
            li.appendChild(span);
            
            var up_a = document.createElement('a');
            var down_a = document.createElement('a');
            
            up_a.innerText = '上移';
            down_a.innerText = '下移';
            li.appendChild(up_a);
            li.appendChild(down_a);
            fragment.appendChild(li);
        })
        ul.appendChild(fragment);
    }
    function remove(){
        var li_list = ul.children;
        for(var i = li_list.length-1;i>=0;i--){
            var li = li_list[i];
            var input = li.firstElementChild;
            if(input.checked){
                ul.removeChild(li);
            }
        }
    }
    function move(event){
        var a = event.target;
        var li = a.parentElement;
        if(a.innerText == '上移'){
            if(ul.firstElementChild == li){
                alert('已经是第一个了');
                return;
            }
            var upli = li.previousSibling;
            ul.insertBefore(li,upli);
        }else if(a.innerText == '下移'){
            if(ul.lastElementChild ==li){
                alert('已经是最后一个了');
                return;
            }
            var downli = li.nextSibling;
            ul.insertBefore(downli,li);
        }
    }
    function order(type){
        var newdata;
        if(type>0){
            newdata = data.sort(function(a,b){
                return a.price < b.price;
            })
        }else{
            newdata = data.sort(function(a,b){
                return a.price > b.price;
            })
        }
        add(newdata);
    }
</script>
</body>
</html>